<?php
include '../app/common.php';
include '../check.php';


$bigAdList = $ADDB->query("SELECT * FROM ad_big")->fetchAll();
$smallAdList = $ADDB->query("SELECT * FROM ad_small")->fetchAll();
$wordAdList = $ADDB->query("SELECT * FROM ad_word")->fetchAll();
$orderList = $ADDB->query("SELECT * FROM ad_order where status = 1")->fetchAll();

?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>数据分析</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../component/pear/css/pear.css" />
	<link rel="stylesheet" href="../admin/css/other/console2.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
	<div class="layui-col-md8">
		<div class="layui-row layui-col-space10">
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">
						快捷菜单
					</div>
					<div class="layui-card-body">
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="home1" data-title="主页" data-url="view/console.php">
									<i class="layui-icon layui-icon-home"></i>
								</div>
								<span class="pear-card-title">主页</span>
							</div>
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="big" data-title="大横幅" data-url="view/big_ad.php">
                                    <i class="layui-icon layui-icon-cart"></i>
								</div>
								<span class="pear-card-title">大横幅</span>
							</div>
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="small" data-title="小横幅" data-url="view/small_ad.php">
                                    <i class="layui-icon layui-icon-template"></i>
								</div>
								<span class="pear-card-title">小横幅</span>
							</div>
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="word" data-title="文字" data-url="view/word_ad.php">
									<i class="layui-icon layui-icon-ok-circle"></i>
								</div>
								<span class="pear-card-title">文字</span>
							</div>
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="paylog" data-title="记录" data-url="view/pay_log.php">
									<i class="layui-icon layui-icon-log"></i>
								</div>
								<span class="pear-card-title">记录</span>
							</div>
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="info" data-title="安全" data-url="view/user_info.php">
									<i class="layui-icon layui-icon-auz"></i>
								</div>
								<span class="pear-card-title">安全</span>
							</div>
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="pay" data-title="支付" data-url="view/pay_set.php">
                                    <i class="layui-icon layui-icon-rmb"></i>
								</div>
								<span class="pear-card-title">支付</span>
							</div>
							<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
								<div class="pear-card" data-id="email" data-title="邮箱" data-url="view/email_set.php">
									<i class="layui-icon layui-icon-app"></i>
								</div>
								<span class="pear-card-title">邮箱</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">
						统计数据
					</div>
					<div class="layui-card-body">
						<div class="layui-row layui-col-space10">
							<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
								<div class="pear-card2">
									<div class="title">大横幅数</div>
									<div class="count pear-text"><?php echo count($bigAdList)?></div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
								<div class="pear-card2">
									<div class="title">小横幅数</div>
									<div class="count pear-text"><?php echo count($smallAdList)?></div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
								<div class="pear-card2">
									<div class="title">文字广告</div>
									<div class="count pear-text"><?php echo count($wordAdList)?></div>
								</div>
							</div>
							<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
								<div class="pear-card2">
									<div class="title">充值条数</div>
									<div class="count pear-text"><?php echo count($orderList)?></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
							<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<div class="layui-col-md4">
		<div class="layui-card">
			<div class="layui-card-header">留言板</div>
			<div class="layui-card-body">
				<ul class="pear-card-status">
					<li>
						<p>夸克广告自助系统</p>
						<span>3月3日 19:92</span>
					</li>
					<li>
						<p>夸克QQ79517721</p>
						<span>4月30日 22:43</span>
					</li>
					<li>
						<p>当前程序版本【<?php echo SYS_VERSION?>】</p>
						<span>4月30日 22:43</span>
					</li>
					<li>
                        <p>当前数据库版本【<?php echo $config['db_version']?>】</p>
						<span>4月30日 22:43</span>
					</li>
					<li>
						<p>本系统免费使用</p>
						<span>4月30日 22:43</span>
					</li>
					<li>
						<p>无授权无加密</p>
						<span>5月12日 01:25</span>
					</li>
					</li>
					<li>
						<p>请勿修改版权信息！！！</p>
						<span>6月11日 15:33</span>
					</li>

				</ul>
			</div>
		</div>
	</div>
</div>
<script src="../component/layui/layui.js"></script>
<script src="../component/pear/pear.js"></script>
<script>
	layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
		var $ = layui.jquery,
				layer = layui.layer,
				element = layui.element,
				echarts = layui.echarts,
				table = layui.table,
				carousel = layui.carousel;



		var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

		$("body").on("click", "[data-url]", function() {
			parent.layui.tab.addTabOnlyByElem("content", {
				id: $(this).attr("data-id"),
				title: $(this).attr("data-title"),
				url: $(this).attr("data-url"),
				close: true
			})
		})
        let echartData = [];

        getEchartsData();
        function getEchartsData(){
            $.ajax({
                type: "post",
                url: "ajax.class.php?act=getEchartsData",
                dataType: "json",
                success: function (res) {
                    layer.close(index);
                    if (res.code == 1) {
                        echartData = res.data;
                    } else {
                        layer.msg(res.msg, {icon: 7, time: 2000, shade: 0.4});
                    }
                },
                error: function () {
                    layer.alert('服务器异常！');
                    layer.close(index);
                }
            });
        }

		let bgColor = "#fff";
		let color = [
			"#0090FF",
			"#36CE9E",
			"#FFC005",
			"#FF515A",
			"#8B5CFF",
			"#00CA69"
		];

		 echartData = [
		    {
                name: "1",
                value1: 0,
                value2: 0
            },
			{
				name: "2",
				value1: 0,
				value2: 0
			},
			{
				name: "3",
				value1: 0,
				value2: 0
			},
			{
				name: "4",
                value1: 0,
                value2: 0
			},
			{
				name: "5",
				value1: 0,
				value2: 0
			},
			{
				name: "6",
                value1: 0,
                value2: 0
			},
			{
				name: "7",
				value1: 0,
				value2: 0
			},
			{
				name: "8",
				value1: 0,
				value2: 0
			},
            {
                name: "9",
                value1: 0,
                value2: 0
            },
            {
                name: "10",
                value1: 0,
                value2: 0
            },
            {
                name: "11",
                value1: 0,
                value2: 0
            },
            {
                name: "12",
                value1: 0,
                value2: 0
            }
		];

		let xAxisData = echartData.map(v => v.name);
		//  ["1", "2", "3", "4", "5", "6", "7", "8"]
		let yAxisData1 = echartData.map(v => v.value1);
		// [100, 138, 350, 173, 180, 150, 180, 230]
		let yAxisData2 = echartData.map(v => v.value2);
		// [233, 233, 200, 180, 199, 233, 210, 180]
		const hexToRgba = (hex, opacity) => {
			let rgbaColor = "";
			let reg = /^#[\da-f]{6}$/i;
			if (reg.test(hex)) {
				rgbaColor =
						`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
								"0x" + hex.slice(3, 5)
						)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
			}
			return rgbaColor;
		}

		option = {
			backgroundColor: bgColor,
			color: color,
			legend: {
				right: 10,
				top: 10
			},
			tooltip: {
				trigger: "axis",
				formatter: function(params) {
					let html = '';
					params.forEach(v => {
						console.log(v)
						html +=
								`<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                元`;
					})



					return html
				},
				extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				axisPointer: {
					type: 'shadow',
					shadowStyle: {
						color: '#ffffff',
						shadowColor: 'rgba(225,225,225,1)',
						shadowBlur: 5
					}
				}
			},
			grid: {
				top: 100,
				containLabel: true
			},
			xAxis: [{
				type: "category",
				boundaryGap: false,
				axisLabel: {
					formatter: '{value}月',
					textStyle: {
						color: "#333"
					}
				},
				axisLine: {
					lineStyle: {
						color: "#D9D9D9"
					}
				},
				data: xAxisData
			}],
			yAxis: [{
				type: "value",
				name: '单位：元',
				axisLabel: {
					textStyle: {
						color: "#666"
					}
				},
				nameTextStyle: {
					color: "#666",
					fontSize: 12,
					lineHeight: 40
				},
				splitLine: {
					lineStyle: {
						type: "dashed",
						color: "#E9E9E9"
					}
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			}],
			series: [{
				name: "<?php echo date('Y')-1;?>",
				type: "line",
				smooth: true,
				// showSymbol: false,/
				symbolSize: 8,
				zlevel: 3,
				lineStyle: {
					normal: {
						color: color[0],
						shadowBlur: 3,
						shadowColor: hexToRgba(color[0], 0.5),
						shadowOffsetY: 8
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: hexToRgba(color[0], 0.3)
								},
									{
										offset: 1,
										color: hexToRgba(color[0], 0.1)
									}
								],
								false
						),
						shadowColor: hexToRgba(color[0], 0.1),
						shadowBlur: 10
					}
				},
				data: yAxisData1
			}, {
				name: "<?php echo date('Y');?>",
				type: "line",
				smooth: true,
				// showSymbol: false,
				symbolSize: 8,
				zlevel: 3,
				lineStyle: {
					normal: {
						color: color[1],
						shadowBlur: 3,
						shadowColor: hexToRgba(color[1], 0.5),
						shadowOffsetY: 8
					}
				},
				areaStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
									offset: 0,
									color: hexToRgba(color[1], 0.3)
								},
									{
										offset: 1,
										color: hexToRgba(color[1], 0.1)
									}
								],
								false
						),
						shadowColor: hexToRgba(color[1], 0.1),
						shadowBlur: 10
					}
				},
				data: yAxisData2
			}]
		};

		echartsRecords.setOption(option);

		window.onresize = function() {
			echartsRecords.resize();
		}

	});
</script>
</body>
</html>
